<template>
  <div
    id="list"
    v-for="(item, index) in list"
    :key="index"
    @click="doRead(item)"
  >
    <div id="neirong">
      <a-tag v-if="item.type" color="green">已读</a-tag>
      <a-tag v-else color="red">未读</a-tag>
      {{ item.content }}
    </div>
    <div style="font-size: 10px">{{ item.time }}</div>
  </div>
</template>
 
<script>
//点赞消息提示
import { defineComponent, ref } from "vue";
import { getNotice, removeNotice } from "../../api/message";

export default defineComponent({
  setup() {
    const list = ref();

    const doRead = (item) => {
      // console.log(item.time);
      removeNotice({
        url: "/message/removeNotice",
        time: item.time,
        success: () => {
          // console.log(res.data);
          item.type = true;
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    getNotice({
      url: "/message/getNotice",
      success: (res) => {
        // console.log(res.data);
        list.value = res.data;
      },
      err: (err) => {
        console.log(err);
      },
    });

    return {
      list,
      doRead,
    };
  },
  components: {},
});
</script>

<style scoped>
#list {
  height: auto;
  width: 100%;
  border: 1px solid rgba(103, 106, 119, 0.3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
#list:hover {
  background: #ffb6c1;
}
/* #neirong {
  max-height: 70px;
  overflow: hidden;
} */
</style>
